<template>
  <div class="shop">
    <header class="header">
      <span class="headerTitle">购物车</span>
      <span class="headerRight" @click="run">{{ management }}</span>
    </header>
    <div v-if="!kong" class="kong">
      <img src="../../public/img/kong.webp" alt="" />
    </div>
    <div class="main" v-if="kong">
      <!-- 购物车物品 -->
      <div class="gwc" v-for="(val, index) in array" :key="index">
        <div class="gwc_z">
          <!-- 复选框 -->
          <span>
            <input
              type="checkbox"
              class="checkbox"
              name="shop"
              :id="index"
              v-model="val.flag"
              @change="xuan(index)"
            />
            <label :for="index"></label>
          </span>
          <!-- 物品图 -->
          <div>
            <img :src="val.image" class="" />
          </div>
        </div>
        <!-- 物品右 -->
        <div class="gwc_y">
          <div>
            {{ val.text }}
          </div>
          <div class="">{{ val.ml }}</div>
          <div class="price">
            <div>
              <span>￥</span>
              <span class="">{{ val.price }}</span>
            </div>
            <!-- 加减 -->
            <div class="jiajian">
              <img
                src="../../public/img/sub.png"
                class="sub"
                @click="sub(index)"
              />
              <input
                type="number"
                name=""
                id=""
                class=""
                v-model="val.num"
                readonly
              />
              <img
                src="../../public/img/add.png"
                class="add"
                @click="add(index)"
              />
            </div>
          </div>
        </div>
      </div>
      <!--  -->
    </div>
    <!-- 全选结算 -->
    <div class="gwcFooter" v-if="final">
      <div class="gwcFooter_z">
        <span>
          <input
            type="checkbox"
            class="checkbox"
            id="quan"
            v-model="flag"
            @change="change()"
          />
          <label for="quan"></label>
          <span>全选</span>
        </span>
      </div>
      <div class="gwcFooter_y" v-if="show">
        <div class="hj">
          <span>合计:</span>
          <span>￥</span>
          <span>{{ total }}</span>
        </div>
        <div class="js">
          <span @click="settles">去结算({{ num }})</span>
        </div>
      </div>
      <!--  -->
      <div class="gwcFooter_y" v-if="!show">
        <div class="hj">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <div class="js">
          <span id="delete" @click="deleteAll">删除</span>
        </div>
      </div>
      <!--  -->
    </div>
    <!-- 提示购买数量 -->
    <div class="ts" v-bind:style="{ display: blockNone }">
      {{ msg }}
    </div>
    <!-- 模态框 -->
    <!-- 是否删除 -->
    <div id="tangk" class="tangk" v-show="tangk">
      <p>
        亲,不再考虑一下吗
        <img src="../../public/img/ku.png" alt="" />
      </p>
      <div class="anniu">
        <button id="btn1" @click="cancel">取消</button>
        <button id="btn2" @click="ok">确定</button>
      </div>
    </div>
    <!-- 遮幕 -->
    <div id="zm" class="zm" @click="zm" v-show="tangk"></div>
  </div>
</template>
<style  scoped>
.kong {
  zoom: 0.4;
  position: relative;
  left: -15%;
}
/*  */
.shop {
  width: 100%;
  background: #f5f5f5;
  box-sizing: border-box;
}
/* 头部 */
.shop .header {
  width: 100%;
  height: 50px;
  background: #eb2e15;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 3%;
}
.shop .header .headerTitle {
  font-size: 18px;
  color: #fff;
  line-height: 50px;
}
.shop .header .headerRight {
  float: right;
  font-size: 0.373333rem;
  font-family: "microsoft yahei";
  color: #fff;
  margin-top: 0.373333rem;
}
/* 购物车商品 */
.main {
  margin-top: 50px;
  width: 100%;
  padding-top: 0.133333rem;
  margin-bottom: 100px;
}
.gwc {
  width: 100%;
  height: 2.933333rem;
  border: 0.026667rem solid #f5f5f58c;
  display: flex;
  align-content: center;
  padding: 4% 2% 2%;
  margin-bottom: 0.053333rem;
  background: #fff;
}
.gwc_z {
  width: 35%;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
/* 复选框 */
.gwc_z span {
  position: relative;
  margin-right: 4%;
}
.gwc_z span .checkbox {
  position: relative;
  visibility: hidden;
}
.gwc_z span .checkbox + label {
  position: relative;
  left: 0;
  top: 0;
  width: 0.64rem;
  height: 0.64rem;
  background: url(../../public/img/checkno.png) no-repeat;
  background-position: -0.053333rem -0.026667rem;
  margin: 0.533333rem 0.266667rem 0 0;
  zoom: 0.8;
}
.gwc_z span .checkbox:checked + label::after {
  content: "";
  width: 0.64rem;
  height: 0.64rem;
  border: 0.026667rem solid transparent;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../../public/img/checkon.png) no-repeat;
  background-position: -0.08rem -0.053333rem;
}
/* 物品图 */
.gwc_z div img {
  width: 100%;
  height: 100%;
  border-radius: 6%;
}
/* y物品右边 */
.gwc_y {
  width: 63%;
  padding-left: 2%;
}
.gwc_y div:nth-child(1) {
  font-size: 0.373333rem;
  color: #1d1d1d;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.gwc_y div:nth-child(2) {
  font-size: 0.32rem;
  color: #c2c2c2;
}
.gwc_y div:nth-child(3) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12%;
}
.price div:first-child {
  color: #eb2e15;
  font-size: 0.373333rem;
}
.jiajian input {
  width: 0.8rem;
  height: 0.533333rem;
  border: 0;
  text-align: center;
  font-size: 0.373333rem;
  background: #ffffff;
  outline: none;
}
.jiajian img {
  width: 0.693333rem;
}
/* 全选结算 */
.gwcFooter {
  height: 50px;
  position: fixed;
  left: 0;
  bottom: 1.333333rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-content: center;
  background: #fff;
}

/* 底部左 */
.gwcFooter_z {
  width: 35%;
}
.gwcFooter_z span {
  position: relative;
  /* margin-right: 4%; */
}
/* .gwcFooter_z span input{
  margin-right: 40px;
} */
.gwcFooter_z span span {
  display: inline-block;
  top: -0.133333rem;
  font-size: 0.373333rem;
  color: #1a1a1a;
}
.gwcFooter_z span .checkbox {
  position: relative;
  visibility: hidden;
}
.gwcFooter_z span .checkbox + label {
  position: relative;
  left: 0;
  top: 0;
  width: 0.64rem;
  height: 0.64rem;
  background: url(../../public/img/checkno.png) no-repeat;
  background-position: -0.053333rem -0.026667rem;
  margin: 0.533333rem 0.266667rem 0 0;
  zoom: 0.8;
}
.gwcFooter_z span .checkbox:checked + label::after {
  content: "";
  width: 0.64rem;
  height: 0.64rem;
  border: 1px solid transparent;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../../public/img/checkon.png) no-repeat;
  background-position: -0.08rem -0.053333rem;
}
/* 合计全选 */
.gwcFooter_y {
  display: flex;
  justify-content: space-around;
  align-content: center;
  width: 60%;
}
.hj {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hj span {
  margin: 0 0.026667rem;
}
.hj span:nth-child(1) {
  font-size: 0.373333rem;
  color: #000;
}
.hj span:nth-child(2),
.hj span:nth-child(3) {
  color: #ef0f00;
  font-size: 0.426667rem;
}
.js {
  display: flex;
  align-items: center;
}
.js span {
  width: 2.666667rem;
  height: 1.066667rem;
  border: 0.026667rem solid red;
  border-radius: 0.533333rem;
  background: red;
  line-height: 0.933333rem;
  text-align: center;
  font-size: 0.426667rem;
  color: #fff;
}
#delete {
  position: relative;
  left: 0.533333rem;
}
/* 后续补充 */
/* 购买数量提示 */
.ts {
  position: fixed;
  left: 50%;
  bottom: 2.133333rem;
  width: 3.733333rem;
  height: 0.8rem;
  transform: translate(-50%, -50%);
  border: 1px solid transparent;
  border-radius: 0.666667rem;
  text-align: center;
  line-height: 30px;
  color: red;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.253);
  font-size: 0.373333rem;
}
/* 弹出框 */
.tangk {
  width: 6.4rem;
  border: 1px solid rgba(0, 0, 0, 0.4);
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background-color: white;
  padding: 0 0;
  font-size: 0.426667rem;
}
.tangk p {
  text-align: center;
  font-weight: bold;
  margin-bottom: 0.266667rem;
}
.tangk p img {
  display: block;
  margin: auto;
  width: 2.666667rem;
  zoom: 0.5;
}
.anniu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1% 1%;
}
.anniu button {
  width: 40%;
  border: 1px solid transparent;
  outline-color: transparent;
  background: #ccc;
  font-size: 0.426667rem;
  padding: 1%;
  margin-top: 2%;
}
#btn2 {
  background: red;
}
/* 遮幕 */
body {
  position: relative;
}
.zm {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 7;
}
</style>
<script>
export default {
  name: "shop",
  data() {
    return {
      kong: "true",
      management: "管理",
      final: "true", //结算全选显示消失
      tangk: false, //遮幕和弹框开关
      flag: "", //全选
      msg: "", //购买提示信息
      // total:"000",//总金额
      num: 0, //结算数量
      blockNone: "none", //购买数量提示显示隐藏
      show: "true",
      array: [],
      /*  array: [  //购物车商品信息
        {
          id:"1",
          num:1,
          image: "/img/list_sy.jpg",
          text: "你说啥你说啥你说啥你说你说啥你说啥你说啥你说你说啥你说啥你说啥你说",
          ml:"600ml",
          price: 10000,
          flag:false
        },
        {
          id:"2",
          num:1,
          image: "/img/list_sy1.jpg",
          text: "你说啥你说啥你说啥你说你说啥你说啥你说啥你说你说啥你说啥你说啥你说",
          ml:"600ml",
          price: 20000,
          flag:false
        },
        {
          id:"3",
          num:1,
          image: "/img/list_sy2.jpg",
          text: "你说啥你说啥你说啥你说你说啥你说啥你说啥你说你说啥你说啥你说啥你说",
          ml:"600ml",
          price: 15000,
          flag:false
        },
        {
          id:"4",
          num:1,
          image: "/img/list_sy3.jpg",
          text: "你说啥你说啥你说啥你说你说啥你说啥你说啥你说你说啥你说啥你说啥你说",
          ml:"600ml",
          price: 13000,
          flag:false
        },
      ], */
    };
  },
  /* 方法 */
  methods: {
    /* settle(){
      this.$router.replace({path:'/settle'});
    }, */
    /* 全选 */
    change() {
      this.array.forEach((item) => {
        item.flag = this.flag;
      });
      /* 全选影响结算数量 */
      if (this.flag) {
        this.num = this.array.length;
      } else {
        this.num = 0;
      }
      localStorage.setItem("shop", JSON.stringify(this.array));
    },
    /* 单选选影响全选 */
    xuan(index) {
      //影响结算数量
      if (this.array[index].flag) {
        //如果勾选了
        this.num++;
      } else {
        this.num--;
      }
      //影响全选
      /* forEach中不能使用break  所以用some()或者every()代替 */
      this.array.some((item, index) => {
        if (item.flag == false) {
          this.flag = false;
          return true;
        } else {
          if (index == this.array.length - 1) {
            this.flag = true;
          }
        }
      });
      localStorage.setItem("shop", JSON.stringify(this.array));
    },
    /* 减 */
    sub(index) {
      if (this.array[index].num > 1) {
        this.array[index].num--; //数量减1
      } else {
        this.msg = "亲,不能再减少了!";
        this.blockNone = "block";
        setTimeout(() => {
          this.blockNone = "none";
        }, 1000);
      }
      localStorage.setItem("shop", JSON.stringify(this.array));
    },
    /* 加 */
    add(index) {
      if (this.array[index].num < 9) {
        this.array[index].num++; //数量加1
      } else {
        this.msg = "亲,购买数量上限了!";
        this.blockNone = "block";
        setTimeout(() => {
          this.blockNone = "none";
        }, 1000);
      }
      localStorage.setItem("shop", JSON.stringify(this.array));
    },
    /* 管理 */
    run() {
      this.show = !this.show;
      if (!this.show) {
        this.management = "完成";
      } else {
        this.management = "管理";
      }
    },
    /* 删除 */
    deleteAll() {
      /* 如果未勾选商品就提示，且不显示模态框 勾选了就显示*/
      this.array.some((item, index) => {
        if (item.flag) {
          this.tangk = true;
          return true;
        } else {
          if (index == this.array.length - 1) {
            this.msg = "亲,你还没选择商品!";
            this.blockNone = "block";
            setTimeout(() => {
              this.blockNone = "none";
            }, 1000);
          }
        }
      });
    },
    /* 模态框 */
    /* 遮幕取消 */
    zm() {
      this.tangk = false;
    },
    /* 取消按钮 */
    cancel() {
      this.tangk = false;
    },
    /* 确定按钮 */
    ok() {
      this.tangk = false;
      /* 删除勾选物品 */
      for (var i = 0; i < this.array.length; i++) {
        if (this.array[i].flag) {
          this.array.splice(i, 1);
          i--;
          this.num--; //对购物数量影响
          localStorage.setItem("shop", JSON.stringify(this.array));
        }
      }
      //这里使用forEach有bug！！
      /* this.array.forEach((item,index)=>{
        if(item.flag){
          this.array.splice(index,1);
          --index;
          this.num--;//对购物数量影响
        }
      }) */
      /* 删除对全选的影响 */
      if (this.array.length == 0) {
        this.flag = false;
      }
      /* 判断是否还有物品 */
      if (this.array.length == 0) {
        this.final = false;
        this.kong = false;
      }
    },
    /* 结算 */
    settles(){
      this.array.some((item, index) => {
        if (item.flag) {
          this.$router.replace({ path: "/settles" }); //进入立即购买的结算页面
          return true;
        } else {
          if (index == this.array.length - 1) {
            this.msg = "亲,你还没选择商品!";
            this.blockNone = "block";
            setTimeout(() => {
              this.blockNone = "none";
            }, 1000);
          }
        }
      });
      //this.$router.replace({ path: "/settle" }); //进入立即购买的结算页面
    }
  },
  /* 计算属性 */
  computed: {
    total() {
      var total = 0;
      this.array.forEach((item) => {
        if (item.flag) {
          total += item.num * item.price;
        }
      });
      return total;
    },
  },
  /* 钩子函数 */
  mounted: function () {
    //获取购物车物品信息
    /* //从全局获取数据
    this.array=this.$store.state.object
    //console.log(this.array[0].num)
    console.log(this.array) */
    if (localStorage.getItem("user")) {
      //如果用户已登录
      this.array = JSON.parse(localStorage.getItem("shop"));
      this.array.some((item, index) => {
        if (item.flag == false) {
          this.flag = false;
          return true;
        } else {
          if (index == this.array.length - 1) {
            this.flag = true;
          }
        }
      });
      /* 勾选件数 */
      this.array.some((val,i)=>{
        if(val.flag==true){
          this.num++
        }       
      })
      /*  */
      if (this.array == null || this.array.length == 0) {
        this.final = false;
        this.kong = false;
      } else {
        this.final = true;
        this.kong = true;
      }
    } else {  //用户没登录
      this.final = false;
      this.kong = false;
    }
  },
};
</script>